<template>
    <div class="picShowBox">
        <div class="picShow">
            <div class="picShowClose" @click="close"><span class="iconfont icon-guanbi"></span></div>
            <el-carousel trigger="click" height="60rem" :autoplay="false" indicator-position="none" :initial-index="active" @change="carouselChange">
                <el-carousel-item v-for="(item, index) in picList" :key="index">
                    <div class="showCenter">
                        <img :src="item.url" alt="" v-if="item.type === 'img'" width="100%">
                        <video :id="'myVideo' + index" class="video-js" v-if="item.type === 'video'">
                            <source :src="item.url" type="video/mp4">
                        </video>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PicShow',
    props: ['picList', 'active'],
    data () {
        return {
            myPlayers: '',
            activeList: [0]
        }
    },
    mounted () {
        this.initVideo()
        console.log(this.myPlayers)
    },
    methods: {
        close: function () {
            this.$emit('close')
        },
        stop: function () {
            const player = this.myPlayers.get(this.activeList[this.activeList.length - 2])
            if (player) player.pause()
        },
        carouselChange: function (e) {
            this.$emit('activeChange', e)
            this.activeList.push(e)
            const player = this.myPlayers.get(e)
            if (player) player.play()
        },
        initVideo () {
            // 初始化视频方法
            const _this = this
            this.myPlayers = new Map()
            this.picList.forEach((item, index) => {
                const playerBox = document.getElementById('myVideo' + index)
                if (playerBox) {
                    _this.myPlayers.set(index, _this.$video(playerBox, {
                        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                        controls: true,
                        // 自动播放属性,muted:静音播放
                        autoplay: !index,
                        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                        preload: 'auto',
                        // 设置视频播放器的显示宽度（以像素为单位）
                        width: '800rem',
                        // 设置视频播放器的显示高度（以像素为单位）
                        height: '400rem'
                    }))
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.picShowBox {
    position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}
.picShow {
    width: 100rem; background: #000000; height: 60rem; position: relative;
    .picShowClose {
        position: absolute; right: -5rem; background: #000000; width: 5rem; height: 5rem; text-align: center; line-height: 5rem;
        cursor: pointer;
        span {
            color: #66C6FF;
        }
    }
    .showCenter {
        display: flex; align-items: center; justify-content: center; height: 60rem;
    }
}
.video-js {
    width: 100%; height: 100%;
}
/deep/.video-js .vjs-big-play-button {
    top: 50%; left: 50%; border-radius: 5rem; width: 6rem; height: 6rem; line-height: 5rem; transform: translate(-50%);
    .vjs-icon-placeholder {
        line-height: 5.5rem; font-size: 3.2rem;
    }
}
</style>
